<template>
    <div>
        <van-popup v-model:show="dialogVisible">
            <div class="title">数据隐私安全声明</div>
            <div class="xuzhi-content" v-html="statement"></div>
            <div class="tc-btm">
                <input type="button" :value="countDownTxt" :class="{ btn_act: countDown <= 0 }" @click="onClose" />
            </div>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useOrderStore } from '@/stores/order';

const dialogVisible = ref(false);
const statement = computed(() => {
    return useOrderStore().statement;
})
const countDown = ref(0);
const timer = ref<any>(null);

const showDialog = () => {
    dialogVisible.value = true;
}

const countDownTxt = computed(() => {
    if (countDown.value <= 0) {
        return '我已阅读并同意';
    } else {
        return `请您仔细阅读声明（倒计时${countDown.value}S）`;
    }
})

watch(dialogVisible, () => {
    if (dialogVisible.value == true) {
        countDown.value = 0;
        if (timer.value) {
            clearInterval(timer.value);
            timer.value = null;
        }
        timer.value = setInterval(() => {
            countDown.value--;
            if (countDown.value < 0) {
                clearInterval(timer.value);
                timer.value = null;
            }
        }, 1000);
    } else {
        if (timer.value) {
            clearInterval(timer.value);
            timer.value = null;
        }
    }
})

const onClose = () => {
    dialogVisible.value = false;
}

defineExpose({ showDialog });
</script>

<style lang="scss" scoped>
.title {
    width: 180px;
    height: 32px;
    margin: 23px auto 15px;
    background: var(--base-color);
    color: #fff;
    text-align: center;
    line-height: 32px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 22px;
}

.xuzhi-content {
    padding: 0 10px;
    max-height: 360px;
    overflow-y: auto;
    color: #333;
    font-size: 14px;
    line-height: 24px;
}

.tc-btm {
    overflow: hidden;
    margin: 30px 20px;

    input[type=button] {
        min-width: 120px;
        height: 40px;
        background: var(--base-color);
        border-radius: 4px;
        border: 0;
        font-size: 16px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        float: right;
        opacity: .4;
        padding: 0 10px;
        pointer-events: none;

        &.btn_act {
            opacity: 1;
            pointer-events: auto;
        }
    }
}
</style>